import React,{FC,useState,useImperativeHandle,forwardRef,useEffect} from 'react'
import { Drawer, Button,DrawerProps,Badge, Descriptions, DescriptionsProps,Tag} from 'antd';
import {getAssetInfoDetail} from '@/api/asset'


// forwardRef可以将子组件的方法暴露给父组件
// useImperativeHandle暴露子组件的方法给父组件
const AssetDetail = forwardRef((prop,ref) => {
    // 是否打开窗口
    const [open, setOpen] = useState(false);
    const [id,setId] = useState('')  // 获取资产详情id
    const [AssetDetailData,setAssetDetailData] = useState<any>({})  // 资产详情数据
    // 监听数据
    useEffect(()=>{
        if (open){
            // 判断如果抽屉是开启的就获取数据
            const res = getAssetInfoDetail({id}).then(res=>{
                console.log(res);
                setAssetDetailData(res.data)
            })
            
        }
    },[open])

    // 数据渲染
    const item1 = [     {
        key: '1',
        label: '域名',
        children: AssetDetailData?.host 
      },
      {
        key: '12',
        label: 'IP',
        children: AssetDetailData.IP ,
      }, 
    ]
    const item2 = [
      
        {
            key: '2',
            label: 'URL',
            children: AssetDetailData.URL ,
        },        
        {
            key: '11',
            label: '端口',
            children: <Tag color="success">{AssetDetailData.port}</Tag> ,
          },  

    ]
    const item3 = [
        {
            key: '3',
            label: '服务',
            children: AssetDetailData.service  ,
          },
          {
            key: '13',
            label: '标题',
            children: AssetDetailData.title ,
          },
    ]
    const item4 = [
        {
            key: '4',
            label: '状态码',
            children: AssetDetailData.status ,
          },
          {
            key: '14',
            label: 'Favicon Hash',
            children: AssetDetailData.FaviconHash ,
          }, 
    ]
    const item5 = [
        {
            key: '5',
            label: 'Jarm',
            children: AssetDetailData.jarm ,
          },
          {
            key: '15',
            label: '时间',
            children: AssetDetailData.time ,
          }, 
    ]
    const item11 =[
        
        {
            key: '6',
            label: '应用/组件',
            children: AssetDetailData.products?.map((item:any)=>{
              return     <Tag color="success">{item}</Tag>
            }) ,
          },
    ]
    const item6 = [

          {
            key: '16',
            label: '项目名称',
            children: <Tag color="success" >{AssetDetailData.project}</Tag> 
          },
    ]
    const item7 = [
        {
            key: '8',
            label: 'TLS',
            children: AssetDetailData.TLSData , 
          },
    ]
    const item8 = [

        {
            key: '7',
            label: 'Hash',
            children: AssetDetailData.hash ,
          },
    ]
    const item9 = [
    
        {
            key: '9',
            label: 'Banner',
            children: AssetDetailData.banner ,
          },
    ]
    const item10 = [
    
        {
            key: '10',
            label: '响应体',
            children: <div>{AssetDetailData.ResponseBody}</div> ,
          },
    ]
    // 将子组件的方法暴露给父组件
    useImperativeHandle(ref,()=>{
        return {
            showLargeDrawer,
        }
    })


    // 抽屉打开
    const showLargeDrawer =  (id:string) => {
        setOpen(true); // 打开抽屉
        setId(id) // 获取id
        

        
    };
    // 抽屉关闭
    const onClose = () => {
        setOpen(false);
    };
    // 抽屉element
    return (
<>
        <Drawer
        title={`资产详情`}
        placement="right"
        width={"100%"}
        onClose={onClose}
        open={open}
        extra={
          <div>

            <Button type="primary" onClick={onClose}>
             关闭
            </Button>
          </div>
        }>
        <Descriptions  labelStyle={{width:"100px"}} items={item1}  />
        <Descriptions  labelStyle={{width:"100px"}}  items={item2}  />
        <Descriptions  labelStyle={{width:"100px"}}  items={item3}  />
        <Descriptions  labelStyle={{width:"100px"}}  items={item4}  />
        <Descriptions  labelStyle={{width:"100px"}} items={item5}  />
        <Descriptions  labelStyle={{width:"100px"}} items={item11}  />
        <Descriptions  labelStyle={{width:"100px"}}  items={item6}  />
        <Descriptions  labelStyle={{width:"100px"}}  items={item7}  />
        <Descriptions  labelStyle={{width:"100px"}}  items={item8}  />
        <Descriptions  labelStyle={{width:"100px"}}  items={item9}  />
        <Descriptions  labelStyle={{width:"100px"}}  items={item10}  />


      </Drawer>
    </>
    )
})

export default AssetDetail